import { FC, useState } from "react";
import {Image} from 'antd'

interface ItemProps {
  item_id: string,
  name: string,
  name_loc: string,
  sort_value: string,
  cost: string,
  img: string
}
interface ItemItemProps{
  data: ItemProps
  thisIndex: number
}

const ItemItem: FC<ItemItemProps> = ({ data, thisIndex }) => {
  const [ status, setStatus ] = useState({
    hovered: false,
    clicked:false
  })
  
  const hide = () => {
    setStatus({
      hovered: false,
      clicked:false
    })
  }
  const handleHoverChange = (visible:any)  => {
    setStatus({
      hovered: visible,
      clicked: false
    })
  }
  const handleClickChange = (visible:any) => {
    setStatus({
      clicked: visible,
      hovered: false,
    });
  };
  const img = data.img
  const url = `/dota/items/images/${img}`
  return (
    <div>
      <img
        width={50}
        src={url}
        referrerPolicy='no-referrer'
        />
      <p>{ data.name_loc }</p>
    </div>
  )
}
export default ItemItem